<template>
  <div id="app">
     <el-tabs v-model="activeTab" type="card" style="width: 100%;border: none;height: 100%;">
      <el-tab-pane label="子账号管理" name="healthArchives" >
        <el-card style="border-color: white">
          <!-- 查询表单 -->
    <!--    欢迎{{this.user.username}}登录-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="登录账号">
        <el-input v-model="formInline.username" placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item label="真实姓名">
        <el-input v-model="formInline.zsname" placeholder="请输入真实姓名"></el-input>
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="formInline.role" placeholder="全部角色"  clearable>
          <el-option  v-for="room in roomList" :label="room.roleName" :value="room.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-select v-model="formInline.status" placeholder="全部" clearable>
          <el-option label="近三个月" value="1"></el-option>
          <el-option label="今年内" value="2"></el-option>
          <el-option label="2022年" value="2"></el-option>
          <el-option label="2021年" value="2"></el-option>
          <el-option label="2020年以前" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="使用状态">
        <el-select v-model="formInline.status" placeholder="全部状态" clearable>
          <el-option label="正常" value="1"></el-option>
          <el-option label="已禁用" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="info" @click="toAdd()" plain>添加子账号</el-button>
    <!--    <el-button type="primary" @click="daochu()">导出</el-button>-->
          <!--表格用来展示数据-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
      >
      </el-table-column>

      <el-table-column
          prop="username"
          label="登录账号"
      >
      </el-table-column>

      <el-table-column
          prop="zsname"
          label="真实姓名"
      >
      </el-table-column>

      <el-table-column
          label="角色"
      >
        <template slot-scope="scope">
          {{a(scope.row.role)}}
<!--          <span v-for="room in roomList" v-if="room.id==scope.row.role">{{room.roleName}}</span>-->
        </template>
      </el-table-column>

      <el-table-column
          prop="zjtime"
          label="最近登录时间"
      >
      </el-table-column>

      <el-table-column
          prop="createtime"
          label="创建时间"
      >
      </el-table-column>

      <el-table-column
          prop="status"
          label="状态"
      >
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-popover
              placement="top"
              width="150"
              trigger="click">
            <div>
              <el-button type="text" @click="toUpdate(scope.row.id)">编辑账号</el-button>
              <el-button type="text" @click="zhuangtai(scope.row.id)">禁用账号</el-button>
              <el-button type="text" @click="zhuangtai(scope.row.id)">启用账号</el-button>
              <el-button type="text" @click="del(scope.row.id)">删除账号</el-button>
            </div>
            <el-button type="text" slot="reference">.<b>.</b>.</el-button>
          </el-popover>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

        </el-card>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="healthRecords" >
          <el-card style="border-color:white">
   <el-form :inline="true" :model="formInline2" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="formInline2.roleName" placeholder="请输入角色名称"></el-input>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-select v-model="formInline2.status" placeholder="全部" clearable>
          <el-option label="近三个月" value="1"></el-option>
          <el-option label="今年内" value="2"></el-option>
          <el-option label="2022年" value="2"></el-option>
          <el-option label="2021年" value="2"></el-option>
          <el-option label="2020年以前" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="使用状态">
        <el-select v-model="formInline2.status" placeholder="全部状态" clearable>
          <el-option label="正常" value="1"></el-option>
          <el-option label="已禁用" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="findPage2()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="info" @click="toAdd()" plain>添加</el-button>
    <el-table
        :data="tableData2"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
      >
      </el-table-column>

      <el-table-column
          prop="roleName"
          label="角色名称"
      >
      </el-table-column>

      <el-table-column
          prop="num"
          label="授权人数"
      >
      </el-table-column>

      <el-table-column
          prop="role"
          label="角色"
      >
      </el-table-column>

      <el-table-column
          prop="createtime"
          label="创建时间"
      >
      </el-table-column>

      <el-table-column
          prop="status"
          label="状态"
      >
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
<!--          <el-button type="text" @click="toUpdate(scope.row.id)" size="mini">修改</el-button>-->
<!--          <el-button type="text" v-if="scope.row.status==1" @click="zhuangtai(scope.row.id,2)" size="mini">解绑定</el-button>-->
<!--          <el-button type="text" @click="yujing(scope.row.id)" size="mini">预警设置</el-button>-->
<!--&lt;!&ndash;          <el-button type="text" v-if="scope.row.status==2" @click="zhuangtai(scope.row.id,1)" size="mini">绑定</el-button>&ndash;&gt;-->
<!--          <el-button type="text" @click="del(scope.row.id)" size="mini">删除</el-button>-->
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange2"
        :current-page="pageNum2"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2">
    </el-pagination>
          </el-card>
      </el-tab-pane>


    </el-tabs>

    <!--添加弹窗-->
    <el-dialog
        title="添加子账号"
        :visible.sync="dialogVisible"
        width="35%">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="角色:">
          <el-select v-model="ruleForm.role" placeholder="请选择"  clearable>
            <el-option  v-for="room in roomList" :label="room.roleName" :value="room.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="账号:" prop="name">
          <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码:" prop="name">
          <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名:" prop="name">
          <el-input v-model="ruleForm.zsname" placeholder="请输入真实姓名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--点击弹窗-->
    <el-dialog
        title="查看"
        :visible.sync="dialogVisible2"
        width="45%">

      <el-form :model="ruleForm2" :rules="rules" ref="ruleForm" label-width="260px" class="demo-ruleForm">

        <el-form-item label="编号:" prop="name">
          {{this.ruleForm2.id}}
        </el-form-item>

        <el-form-item label="角色:">
<!--          <el-select v-model="ruleForm2.role" placeholder="请选择"  clearable>-->
<!--            <el-option  v-for="room in roomList" :label="room.roleName" :value="room.id"></el-option>-->
<!--          </el-select>-->
<!--          <el-select v-model="dx" placeholder="请选择"  clearable>-->
<!--            <el-option>-->
<!--              <el-checkbox-group v-model="dx">-->
<!--                <el-checkbox v-for="role in roomList" :label="role.roleName" :key="role.id"></el-checkbox>-->
<!--              </el-checkbox-group>-->
<!--            </el-option>-->
<!--          </el-select>-->
          <el-checkbox-group v-model="dx">
            <el-checkbox v-for="role in roomList" :label="role.roleName" :key="role.id"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="账号:" prop="name">
          <el-input v-model="ruleForm2.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码:" prop="name">
          <el-input v-model="ruleForm2.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名:" prop="name">
          <el-input v-model="ruleForm2.zsname" placeholder="请输入真实姓名"></el-input>
        </el-form-item>

        <el-form-item label="状态:" prop="name">
          {{this.ruleForm2.status}}
        </el-form-item>

        <el-form-item label="创建时间:" prop="name">
          {{this.ruleForm2.createtime}}
        </el-form-item>

        <el-form-item label="修改时间:" prop="name">
          {{this.ruleForm2.zjtime}}
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add('ruleForm')" v-text="ruleForm.id==null?'添加':'修改'"></el-button>
          <el-button type="primary" @click="guanbi()">关闭</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>
</template>

<style >
.el-input{
  width:200px;
  //margin-left: 40px;
}
</style>

<script>
// @ is an alias to /src
import axios from "axios"
export default {
  data(){
    return{
      activeTab: 'healthArchives',
      /*
        data:就是用来定义数据的要用什么就自己定义什么
        []:数组，集合
        {}:对象(里面有属性)
         */
      content: '',
      dx:[],
      tableData:[],
      tableData2:[],
      pageNum:1,
      pageNum2:1,
      pageSize:10,
      pageSize2:10,
      total:0,
      total2:0,
      formInline:{},
      formInline2:{},
      user:{},
      roomList:[],
      dialogVisible:false,
      dialogVisible2:false,
      tx:[],
      ruleForm:{},
      ruleForm2:{},
      // ruleForm:{},
      imageUrl:"",
      value1:[],
      yid:null,
    }
  },
  methods: {
    a(role){
      var x=[]
      var b=''
      this.roomList.forEach(
          item=>{
            x.push(item.roleName)
          }
      );
      role.split(",").forEach(item=>{
        b+=x[item-1]+","
    })
      return b
    },
    findPage() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-user-login/xm-login/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        // if (this.pageNum>res.data.data.pages){
        //   this.pageNum=res.data.data.pages;
        //   this.findPage();
        // }
      })
    },
    findPage2() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-user-login/xm-role/findPage2?pageNum=${this.pageNum2}&pageSize=${this.pageSize2}`, this.formInline2).then(res => {
        console.log(res.data);
        this.tableData2 = res.data.data.records;
        this.total2 = res.data.data.total;
        // if (this.pageNum>res.data.data.pages){
        //   this.pageNum=res.data.data.pages;
        //   this.findPage();
        // }
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage();
    },
    handleCurrentChange2(val) {//分页方法
      this.pageNum2 = val;
      this.findPage2();
    },
    toAdd() { //往添加对话框里清空数据
      this.dialogVisible = true;
      this.ruleForm = {};
    },
    add(formName) { //添加方法
      this.$refs[formName].validate((valid) => {
        if (valid) {//满足校验
          //通过ajax把数据保存到后端
          if (this.ruleForm.yxq == "指定日期"){
            this.ruleForm.yxq = this.value1[0] + "至" + this.value1[1];
          }
          this.axios.post(`http://localhost:9001/sbgl/add`, this.ruleForm).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.dialogVisible3 = false;
            } else {
              this.$message.error("添加失败");
            }
            this.dialogVisible = false;
            this.findPage();
          })
        } else {//不满足校验
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) { //重置按钮点击可以重置
      this.$refs[formName].resetFields();
    },
    toUpdate(id) { //修改回显数据方法
      this.axios.get(`http://localhost:8000/xm-user-login/xm-login/findById?id=${id}`).then(res => {
        this.ruleForm2 = res.data.data;
        this.dialogVisible2 = true;
      })
    },
    del(id) { //删除方法
      this.$confirm("确定要删除吗?一旦删除,该条信息将不能恢复。", '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get(`http://localhost:9001/sbgl/deleteById?id=${id}`).then(res => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败！");
          }
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    zhuangtai(id, status) { //状态修改方法
      axios.get(`http://localhost:9001/sbgl/zhuangtai?id=${id}&status=${status}`).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.data);
          this.findPage();
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    guanbi() {
      this.dialogVisible = false;
      this.dialogVisible2 = false;
    },
    xialaList() {
      this.axios.get(`http://localhost:8000/xm-user-login/xm-role/xialaList`).then(res => {
        this.roomList = res.data.data;
      })
    },
  },
  created() {
    this.findPage();//展示所有的数据
    this.findPage2();//展示所有的数据
    this.xialaList();//动态获取下拉框的数据
  }
}
</script>
